import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter_common_app/data/play_song_data.dart';
import 'package:flutter_common_app/data/playlist_data.dart';
import 'package:flutter_common_app/data/recommend_playlist_data.dart';
import 'package:flutter_common_app/provider_model/audio_model.dart';
import 'package:flutter_common_app/widgets/app_bar/custom_app_bar.dart';
import 'package:flutter_common_app/widgets/custom_image/custom_image.dart';
import 'package:flutter_common_app/widgets/empty_view/h_empty_view.dart';
import 'package:flutter_common_app/widgets/empty_view/v_empty_view.dart';
import 'package:flutter_common_app/widgets/play_all_songs_bar.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:provider/provider.dart';

class PlaylistDetailSliverHeader extends SliverPersistentHeaderDelegate {
  final RecommendPlaylistData recommendPlaylistData;
  final PlaylistData playlistData;

  PlaylistDetailSliverHeader(this.recommendPlaylistData, this.playlistData);

  double _bottomRowItemH = 90.w;

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return SizedBox(
      width: 750.w,
      height: maxExtent,
      child: Stack(
        fit: StackFit.expand,
        children: [
          CustomImage.network(
            recommendPlaylistData.picUrl,
            fit: BoxFit.cover,
          ),
          ClipRect(
            child: BackdropFilter(
                filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
                child: Column(
                  children: [
                    CustomAppBar(
                      Text(
                        (1 - shrinkOffset / maxExtent) < 0.5
                            ? recommendPlaylistData.name
                            : '歌单',
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 30.sp,
                        ),
                      ),
                      leading: BackButton(
                        color: Colors.white,
                      ),
                      backgroundColor: Colors.grey.withOpacity(0),
                    ),
                  ],
                )),
          ),
          Positioned(
            bottom: 20.w + _bottomRowItemH,
            left: 30.w,
            right: 30.w,
            child: Opacity(
              opacity: (1 - shrinkOffset / maxExtent) < 0.4
                  ? 0
                  : (1 - shrinkOffset / maxExtent),
              child: Column(
                children: [
                  Row(
                    children: [
                      CustomImage.network(
                        '${recommendPlaylistData.picUrl}?param=200y200',
                        width: 200.w,
                        height: 200.w,
                        borderRadius: BorderRadius.all(
                          Radius.circular(20.w),
                        ),
                      ),
                      HEmptyView(20.w),
                      Expanded(
                        child: buildDescView(),
                      ),
                    ],
                  ),
                  VEmptyView(50.w),
                  Row(
                    children: [
                      buildBottomRowItem('images/icon_comment.png',
                          playlistData?.commentCount.toString() ?? '评论', () {}),
                      buildBottomRowItem('images/icon_share.png',
                          playlistData?.shareCount.toString() ?? '分享', () {}),
                      buildBottomRowItem(
                          'images/icon_download.png', '下载', () {}),
                      buildBottomRowItem(
                          'images/icon_multi_select.png', '多选', () {}),
                    ],
                  ),
                ],
              ),
            ),
          ),
          Positioned(
            bottom: 0,
            child: GestureDetector(
              onTap: () {
                Provider.of<AudioModel>(context, listen: false)
                    .playAll(playlistData.tracks.map((item) {
                  return PlaySongData(
                    item.id,
                    name: item.al.name,
                    picUrl: item.al.picUrl,
                    artists: '${item.ar.map((a) => a.name).toList().join('/')}',
                  );
                }).toList());
              },
              behavior: HitTestBehavior.opaque,
              child: PlayAllSongsBar(
                bottomRowItemH: _bottomRowItemH,
                count: playlistData?.trackCount ?? 0,
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget buildDescView() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          recommendPlaylistData?.name ?? '',
          style: TextStyle(
            fontSize: 30.w,
            color: Colors.white,
            fontWeight: FontWeight.bold,
          ),
          maxLines: 2,
          overflow: TextOverflow.ellipsis,
          textAlign: TextAlign.start,
        ),
        VEmptyView(10.w),
        Row(
          children: [
            if (playlistData != null)
              CustomImage.network(
                '${playlistData?.creator?.avatarUrl}',
                width: 50.w,
                borderRadius: BorderRadius.circular(50.w),
              ),
            HEmptyView(10.w),
            Text(
              playlistData?.creator?.nickname ?? '',
              style: TextStyle(
                fontSize: 24.sp,
                color: Colors.white70,
              ),
            ),
            Icon(
              Icons.keyboard_arrow_right,
              color: Colors.white70,
              size: 35.w,
            ),
          ],
        ),
        VEmptyView(10.w),
        Row(
          children: [
            Expanded(
              child: Text(
                playlistData?.description?.replaceAll('\n', ' ') ?? '',
                style: TextStyle(
                  fontSize: 20.sp,
                  color: Colors.white70,
                ),
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
              ),
            ),
            Icon(
              Icons.keyboard_arrow_right,
              color: Colors.white70,
            ),
          ],
        ),
      ],
    );
  }

  Widget buildBottomRowItem(
    String img,
    String text,
    Function onTap,
  ) {
    return Expanded(
      child: GestureDetector(
        onTap: onTap,
        child: Column(
          children: <Widget>[
            Image.asset(
              img,
              width: 45.w,
              height: 45.w,
              fit: BoxFit.cover,
            ),
            VEmptyView(8.w),
            Text(
              text,
              style: TextStyle(fontSize: 24.w, color: Colors.white70),
            )
          ],
        ),
      ),
    );
  }

  @override
  double get maxExtent =>
      ScreenUtil().statusBarHeight + kToolbarHeight + 400.w + _bottomRowItemH;

  @override
  double get minExtent =>
      ScreenUtil().statusBarHeight + kToolbarHeight + _bottomRowItemH;

  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
    return true;
  }
}
